<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <Modal
          title="留言"
          v-model="see"
          class-name="vertical-center-modal"
          @on-cancel="cancel"
          :width="400"
        >
          <b>{{this.detail.memberComment}}</b>
        </Modal>

        <Select v-model="bloc.model.sortId" @on-change="handleChange(bloc.model.sortId)" placeholder="设备分类"
                style="width: 180px;margin-right: 10px">
          <Option
            v-for="item in bloc.sortList"
            :value="item.id"
            :key="item.id"
          >{{ item.sortName }}
          </Option>
        </Select>
        <!-- <Select v-model="bloc.model.modelId" @on-change="handleChange2(bloc.model.modelId)" placeholder="设备型号" style="width:180px;margin-right:10px">
          <Option
            v-for="item in bloc.modelList"
            :value="item.id"
            :key="item.id"
          >{{ item.modelName }}
          </Option>
        </Select> -->
        <!-- <Select v-model="bloc.model.selfMotionId" placeholder="设备模式" style="width:180px;margin-right:10px">
          <Option
            v-for="item in bloc.modeList"
            :value="item.id"
            :key="item.id"
          >{{ item.modeName }}
          </Option>
        </Select> -->
        <Input
          placeholder="请输入要查询的联系电话"
          v-model="bloc.model.phone"
          style="width: 180px; margin-right: 10px"
        />
        <DatePicker
          type="daterange"
          placeholder="建议时间"
          format="yyyy/MM/dd"
          v-model="bloc.model.date"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
        >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns4"
        highlight-row
        :data="bloc.paged.items"
      >
<!--        <template slot-scope="{ row }" slot="action">-->
<!--            <vue-stars-->
<!--              name = 'evaluation'-->
<!--              :max='5'-->
<!--              :value= row.evaluationRating-->
<!--              :readonly='true'-->
<!--            />-->
<!--        </template>-->
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>

</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import { Route } from 'vue-router';
    import { FormBloc } from '@/view/evaluation/ListBloc';
    import { formatDate } from '@/base/util/Dates';
    import { Validation } from '@/base/Validation';
    import { Resources } from '@/base/Resources';
    // import { VueStars } from 'vue-stars';
    @Component({
        components: {}
    })
    // Vue.component('vue-stars', VueStars);
    export default class extends Vue {

        columns4: any = [
            {
                title: '设备分类',
                key: 'sortName',
                align: 'left',
                minWidth: 100,
                tooltip: true
            },
            {
                title: '设备型号',
                key: 'modelName',
                align: 'left',
                minWidth: 100,
                tooltip: true
            },
            {
                title: '模式',
                key: 'modeName',
                align: 'left',
                minWidth: 100,
                tooltip: true
            },
            {
                title: '用户名',
                key: 'nickname',
                align: 'left',
                minWidth: 100,
                tooltip: true
            },
            {
                title: '用户手机号',
                key: 'phone',
                align: 'left',
                minWidth: 100,
                tooltip: true
            },
            // {
            //     title: 'amo',
            //     slot: 'action',
            //     width: 200,
            //     align: 'left',
            //     fixed: 'right'
            // },
            {
                title: '按摩力度',
                render: (h: any, params: any) => {
                    return h('b', {
                        domProps: {
                            innerText: this.bloc.shuchu(params.row.strengthRating)
                        },
                        style: {
                            'color': '#F56C6C',
                            'font-size': '25px',
                            'font-weight': 'normal'
                        }
                    });
                },
                width: 160,
                align: 'left',
                tooltip: true
            },
            {
                title: '按摩评价',
                render: (h: any, params: any) => {
                    return h('b', {
                        domProps: {
                            innerText: this.bloc.shuchu(params.row.evaluationRating)
                        },
                        style: {
                            'color': '#F56C6C',
                            'font-size': '25px',
                            'font-weight': 'normal'
                        }
                    });
                },
                width: 160,
                align: 'left',
                tooltip: true
            },
            {
                title: '按摩手法',
                render: (h: any, params: any) => {
                    return h('b', {
                        domProps: {
                            innerText: this.bloc.shuchu(params.row.skillRating)
                        },
                        style: {
                            'color': '#F56C6C',
                            'font-size': '25px',
                            'font-weight': 'normal'
                        }
                    });
                },
                width: 160,
                align: 'left',
                tooltip: true
            },
            {
                title: '留言',
                render: (h: any, params: any) => {
                    return h('div', {
                        domProps: {
                            innerText: params.row.memberComment == null
                                ? params.row.memberComment
                                : params.row.memberComment.length <= 5
                                    ? params.row.memberComment
                                    : params.row.memberComment.substr(0, 5) + '...'
                        },
                        on: {
                            click: () => {
                                this.appear(params.row.memberComment)
                            }
                        }
                    });
                },
                width: 160,
                align: 'left',
                tooltip: true
            },

            {
                title: '评价时间',
                render: (h: any, params: any) => {
                    return h('span', {
                        domProps: {
                            innerText: formatDate(
                                new Date(params.row.created),
                                'yyyy-MM-dd hh:mm'
                            )
                        }
                    });
                },
                width: 160,
                align: 'left',
                tooltip: true
            }
        ];
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc
                    .getAllSort(1, 1000, 'DESC').catch((e) => {
                    vm.$Message.error('分类获取错误');
                });
                vm.bloc.getAllModel(1, 1000, undefined, 'DESC', undefined).catch((e) => {
                    vm.$Message.error('名称获取错误');
                });
                vm.bloc.getAllMode(1, 1000, undefined, 'DESC').catch((e) => {
                    vm.$Message.error('模式获取错误');
                });
                vm.bloc.load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
                    .catch((e) => {
                        vm.$Message.error('加载错误');
                    });
            });
        }
        bloc: FormBloc = new FormBloc();
        Validation = Validation;
        Resources = Resources;
        ruleValidate = {
        };
        handleChange(sortId) {
            this.bloc
                .getAllModel(1, 1000, sortId, 'DESC', undefined).then((res) => {});
        }
        handleChange2(modelId) {
            this.bloc
                .getAllMode(1, 1000, modelId, 'DESC').then((res) => {});
        }

        private row: any;
        see: any = false;
        cancel() {
            this.see = false;
        }
        detail: any = {
            memberComment: ''
        };
        appear(value) {
            this.detail.memberComment = value;
            this.see = true;
        }
    }

</script>

<style lang="less">
</style>
